import { useState } from "react";

import CloseIcon from "./rna-close.png";
import HomeIcon from "./rna-home.png";
import MenuIcon from "./rna-menu.png";
import "./index.scss";

export default function RotatingNavigationAnimation() {
  const [isRotate, setIsRotate] = useState(false);

  return (
    <div className='rotating-navigation-animation'>
      <div className={["rnac-medal", isRotate ? "rna-route-90" : ""].join(" ")}>
        <div className='rnacm-circle' onClick={() => setIsRotate(x => !x)}>
          <img src={MenuIcon} />
          <img src={CloseIcon} />
        </div>
      </div>
      <div
        className={["rna-content", isRotate ? "rna-route-10" : ""].join(" ")}
      ></div>
    </div>
  );
}
